<template>
    <div class="wrapper">
        <HeaderNav title="设置店面">
        </HeaderNav>
        <div class="uploadImage">
            <UploadImage :shop="$data.shop" :onChangeFile="onChangeFile"></UploadImage>
        </div>
        <div class="fields">
            <div class="formItem">
                <div class="formItemTitle">店面名字
                    <small> (名字确定后不可修改)</small>
                </div>
                <div class="input">
                    <input type="text" v-model="shop.name" disabled/>
                </div>
            </div>
            <div class="formItem">
                <div class="formItemTitle"> 网站：
                </div>
                <div class="input" @click="$router.push(`/shop/${shop.name}`)">
                    <span>http://m.diyeetech.com/shop/</span><span>{{shop.name}}</span>
                </div>
            </div>
            <div class="formItem">
                <div class="formItemTitle">描述</div>
                <div class="input textarea">
                    <textarea name="" id="" cols="30" rows="10"
                              v-model="shop.desc"
                    ></textarea>
                </div>
            </div>
        </div>
        <div class="subbtn" @click="updateShop">
            提交
        </div>
    </div>
</template>
<style lang="less" scoped>
    .wrapper {
        .fields {
            margin-top: 30px;
            .formItem {
                padding-left: px2rem(20);
                padding-right: px2rem(20);
                border-bottom: 1px solid #eee;
                .formItemTitle {
                    font-weight: 600;
                    color: #8e8e8e;
                    width: 100%;
                    margin-top: 5px;
                }
                .input {
                    display: flex;
                    align-items: center;
                    height: px2rem(80);
                    width: 100%;
                    input[type='text'] {
                        border: none;
                        height: px2rem(45);
                        width: 100%;
                        padding-left: 10px;
                    }
                    &.textarea {
                        height: auto;
                        textarea {
                            margin-top: 5px;
                            width: 100%;
                            background: rgba(238, 238, 238, 0.62);
                            border: none;
                            padding: 10px;
                        }
                    }
                }

                &:last-child {
                    border-bottom: none;
                }
            }
        }

        .subbtn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80%;
            height: .3rem;
            background: #ff4800;
            align-self: center;
            color: #fff;
            margin: auto;
            border-radius: 50px;
            margin-top: 20px;
        }
    }
</style>
<script>
    import HeaderNav from '../../components/HeaderNav'
    import UploadImage from './uploadImage'
    import {getUserShop} from "./service";
    import MyAlert from "../../utils/myalert";
    import withStore from "../../vuex/withStore";
    import {updateShop} from "./service";

    export default withStore({
        components: {
            HeaderNav, UploadImage
        },
        data() {
            return {
                shop: this.getStore('app.user_shop').shop
            }
        },
        methods: {
            updateShop() {
                if (this.$data.shop.desc) {
                    if (this.$data.shop.desc.length <= 20 || 100 <= this.$data.shop.desc.length) {
                        MyAlert.fail("描述不能小于20或大于100")
                        return false
                    }
                }
                MyAlert.loading()
                updateShop(this.$data.shop).then(res => {
                    MyAlert.clear()
                    MyAlert.success("修改成功")
                }).catch(e => {
                    MyAlert.clear()
                    console.error(e)
                    MyAlert.fail(e.message)
                })
            },
            onChangeFile(file) {
                this.$data.shop.image = file
            }
        },
        mounted() {
            var self = this
            getUserShop().then(userWithShop => {
                self.setStore('app.user_shop', userWithShop)
                self.$data.shop = userWithShop.shop
            }).catch(e => {
                console.error(e)
                MyAlert.fail(e)
            })
        }
    })
</script>